<!DOCTYPE html>
<%@page language="java" contentType="text/html" pageEncoding="UTF-8" %>

<html>
<head>
 <link type="text/css" rel="stylesheet" href="demo.css" />

 <script type="text/javascript" src="../js/mootools.js"></script>
 <script type="text/javascript" src="tree.js"></script>
 <title>Categories</title>
</head>
<body>
  <fieldset style="margin:0 0 5px 10px;">
    <div style="float:left;">
      <label for="where">Where: </label>
      <select id="where" name="where">
        <option value="inside" selected="selected">inside</option>
        <option value="after">after</option>
        <option value="before">before</option>
      </select>
    </div>
    <div style="float:left;margin-left:5px;">
      <label for="type">Type: </label>
      <select id="type" name="type">
        <option value="C" selected="selected">category</option>
        <option value="P">preference</option>
        <option value="A">attribute</option>
      </select>
    </div>
    <div style="float:left;margin-left:5px;">
      <button id="add_gcat" type="button">Add global</button>
      <button id="scategory" type="button">Add category</button>
    </div>
  </fieldset>
  <div style="clear:both;"></div>
  <div id="container1" class="container"></div>
  <div id="container2" class="container"></div>
  <div style="clear:both;"></div>

  <ul id="contextmenu"></ul>
</body>

<script type="text/javascript">
window.addEvent('domready', function() {

    var json = new CV.Tree.Json();

/*    CV.Tree.Node.implement({
        getPath: function() {
            var path = [];
            var node = this;
            while(node) {
                path.push(node.name);
                node = node.getParent();
            }
            return path.reverse().join('/');
        }
    });*/

    var tree1 = new CV.Tree({
        container: 'container1', // tree container
        initialize: function() {
            this.initSortable();
            new CV.Tree.Drag(this);
            new CV.Tree.QuickToolbar(this);
//            this.addEvent('nodeCreate', function(node) {
//                console.log('tree1 nodeCreate node=',node);
//                node.set({
//                    property:{
//                        id: node.getPath()
//                    }
//                });
//            });
        },
        types: {
//            folder: {
//                openIcon: 'cv-tree-open-icon',
//                closeIcon: 'cv-tree-close-icon',
//                loadable: true
//            },
//            file: {
//                openIcon: 'cv-tree-file-open-icon',
 //               closeIcon: 'cv-tree-file-close-icon'
 //           },
            loader: {
                openIcon: 'cv-tree-loader-open-icon',
                closeIcon: 'cv-tree-loader-close-icon',
                DDnotAllowed: ['inside','after']
            }
        },
        dfltType: 'folder', //default node type
        onRename: function(node, newName, oldName) {
            //console.log('rename node=',node,' new=',newName,' old=',oldName);
            json.rename(node, newName, oldName);
        },
        onAdd: function(node, current, where, type) {
            //console.log('insert node=',node,' current=',current,' where=',where,' type=',type);
            json.insert(node, current, where, type);
        },
        onRemove: function(current) {
            //console.log('remove node=',current,' current.data.id=',current.data.id,' current.data.cid=',current.data.cid);
            json.remove(current);
        },
        onCopy: function(from, to, where, copy) {
            //console.log('container1 onCopy from=',from,' to=',to,' where=',where,' copy=',copy);
            json.copy(from, to, where, copy, 'Y');
        },
        onMove: function(current, target, where) {
            //console.log('container1 onMove current=',current,' target=',target,' where=',where);
            json.move(current, target, where, 'Y');
        }
    });

    tree1.addEvent('action', function(action, node) {
        if(action == 'add') {
            node.tree.add({ property: { name: 'new - rename' } }, node, 'inside');
        }
        else if(action == 'rename') {
            node.rename();
        }
        else if(action == 'remove') {
            if(confirm('delete?')) {
                node.remove();
            }
        }
    });

    // load tree from json.
    //tree1.load({ url: 'http://10.0.22.19:8080/Admin/tree/orig/assets/files/my.json' });
    //tree1.loadLink({ url: '/Admin/tree/proxy?exec=active&pid=0' });
    tree1.load({ url: '/Admin/tree/proxy?exec=getcat&active=Y&pid=0' });

    tree1.loadOptions = function(node) {
        //console.log('tree1 node=',node);
        return {
            url: '/Admin/tree/proxy',
            data: { 'exec': 'getcat', 'active': 'Y', 'pid': node.data.cid }
        };
    };


    $('add_gcat').addEvent('click', function(){
        var current = tree1.getSelected();
        if(!current) {
            alert('select node');
            return true;
        }

        current.data.cid = 0;
        current.data.active = 'Y';

        var where = $('where').getElement(':selected').get('value');
        var type = $('type').getElement(':selected').get('value');
  
        tree1.add({
            property: {
                name      : 'Rename this1',
                openIcon  : 'cv-tree-empty-icon',
                closeIcon : 'cv-tree-empty-icon',
                data: {
                    cid   : current.data.cid,
                    active: current.data.active
                }
            }
        }, current, where, type);

        return false;
    });




    var tree2 = new CV.Tree({
        container: 'container2', // tree container
        initialize: function() {
            this.initSortable();
            new CV.Tree.Drag(this);
            new CV.Tree.QuickToolbar(this);
//            this.addEvent('nodeCreate', function(node) {
//                console.log('tree2 nodeCreate node=',node);
//                node.set({
//                    property:{
//                        id: node.getPath()
//                    }
//                });
//            });
        },
        types: {
//            folder: {
//                openIcon: 'cv-tree-open-icon',
//                closeIcon: 'cv-tree-close-icon',
//                loadable: true
//            },
//           file: {
//                openIcon: 'cv-tree-file-open-icon',
//                closeIcon: 'cv-tree-file-close-icon'
//            },
            loader: {
                openIcon: 'cv-tree-loader-open-icon',
                closeIcon: 'cv-tree-loader-close-icon',
                DDnotAllowed: ['inside','after']
            }
        },
        dfltType: 'folder', //default node type
        onRename: function(node, newName, oldName) {
            //console.log('rename node=',node,' new=',newName,' old=',oldName);
            json.rename(node, newName, oldName);
        },
        onAdd: function(node, current, where) {
            //console.log('insert node=',node,' current=',current,' where=',where);
            json.insert(node, current, where);
        },
        onRemove: function(current) {
            //console.log('remove node=',current);
            json.remove(current);
        },
        onCopy: function(from, to, where, copy) {
            //console.log('container2 onCopy from=',from,' to=',to,' where=',where,' copy=',copy);
            json.copy(from, to, where, copy, 'N');
        },
        onMove: function(current, target, where) {
            //console.log('container2 onMove current=',current,' target=',target,' where=',where);
            json.move(current, target, where, 'N');
        }
    });

    tree2.addEvent('action', function(action, node) {
        if(action == 'add') {
            node.tree.add({ property: { name: 'new - rename' } }, node, 'inside');
        }
        else if(action == 'rename') {
            node.rename();
        }
        else if(action == 'remove') {
            if(confirm('delete?')) {
                node.remove();
            }
        }
    });

    // load tree from json.
//    tree.load({ json: json });
//    tree2.loadLink({ url: '/Admin/tree/proxy?exec=inactive&pid=0' });
    tree2.load({ url: '/Admin/tree/proxy?exec=getcat&active=N&pid=0' });

    tree2.loadOptions = function(node) {
        //console.log('tree2 node=',node);
        return {
            url: '/Admin/tree/proxy',
            data: { 'exec': 'getcat', 'active': 'N', 'pid': node.data.cid }
        };
    };

});

</script>

</html>

